<template>
    <div class="view">
        <el-container class="bottom">
            <el-aside class="left-menu" width="200px">
                <leftMenu></leftMenu>
            </el-aside>
            <el-container class="container">
                <el-header class="top">
                    <topBar></topBar>
                </el-header>
                <el-main class="main">
                    <router-view :key="$route.fullPath"></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script>
    import topBar from './components/topBar';
    import leftMenu from './components/leftMenu';

    export default {
        name: 'index',
        components: {
            topBar, leftMenu,
        },
        methods: {},
    };
</script>

<style scoped lang="scss">
    .view {
        height: 100%;
    }
    .top {
        padding: 0;
        background: #FFFFFF;
        position: fixed;
        width: calc(100% - 200px);
        right: 0;top: 0;z-index: 9;
        box-shadow: 2px 2px 6px 1px #cccccc;
    }

    .bottom {
        height: 100%;
        overflow: auto;
    }

    .left-menu {
        background: $color-black-20;
        color: #FFFFFF;
        overflow-x: hidden;
        border-right: 1px solid $color-black-20;
        &>div{
            overflow: hidden;
        }
    }

    .container {
        overflow: auto;
        background: #e0e0e0;
    }
    .main{
        /*margin: 20px;*/
        height: 100%;
        padding-top: 60px;
        /*background: #FFFFFF;*/
        /*border-radius: $radius-main;*/
    }
</style>